<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人投资管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-size: 0.875rem; /* 14px */
        }
        .header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            font-size: 0.875rem; /* 14px */
        }
        .feature-card {
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
            border: none;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            font-size: 0.875rem; /* 14px */
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 1.5rem 0;
            margin-top: 2rem;
            border-radius: 10px 10px 0 0;
            font-size: 0.875rem; /* 14px */
        }
        .quick-link {
            text-decoration: none;
            color: inherit;
        }
        .quick-link:hover {
            text-decoration: none;
            color: inherit;
        }
        .card-primary {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
        }
        .card-success {
            background: linear-gradient(135deg, #28a745, #1e7e34);
            color: white;
        }
        .card-info {
            background: linear-gradient(135deg, #17a2b8, #117a8b);
            color: white;
        }
        .card-warning {
            background: linear-gradient(135deg, #ffc107, #d39e00);
            color: white;
        }
        .card-danger {
            background: linear-gradient(135deg, #dc3545, #bd2130);
            color: white;
        }
        .card-secondary {
            background: linear-gradient(135deg, #6c757d, #545b62);
            color: white;
        }
        .card-purple {
            background: linear-gradient(135deg, #6f42c1, #59339d);
            color: white;
        }
        .btn-card {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-size: 0.8125rem; /* 13px */
        }
        .btn-card:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: white;
        }
        .accordion-button {
            font-weight: 500;
            font-size: 0.875rem; /* 14px */
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            font-size: 0.875rem; /* 14px */
        }
        h1, h2, h3, h4, h5, h6 {
            font-size: 1.25rem; /* 20px for h1, smaller for others */
        }
        h1 {
            font-size: 2rem; /* 32px */
        }
        h2 {
            font-size: 1.5rem; /* 24px */
        }
        .lead {
            font-size: 1rem; /* 16px */
        }
        .form-control, .form-select {
            border-radius: 8px;
            font-size: 0.875rem; /* 14px */
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-bank"></i> 个人投资管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 头部 -->
    <header class="header">
        <div class="container text-center">
            <h1><i class="bi bi-graph-up"></i> 个人投资管理系统</h1>
            <p class="lead">一站式管理您的基金投资组合、交易记录和投资目标</p>
        </div>
    </header>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 系统介绍 -->
        <section class="mb-5">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2>欢迎使用个人投资管理系统</h2>
                    <p class="lead">
                        本系统为您提供全面的投资管理功能，帮助您更好地跟踪和管理您的基金投资。
                        通过直观的界面和强大的分析工具，您可以轻松掌握投资状况，做出明智的决策。
                    </p>
                </div>
            </div>
        </section>

        <!-- 功能模块 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">功能模块</h2>
            <div class="row">
                <!-- 标的管理 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-primary">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-bank"></i>
                            </div>
                            <h5 class="card-title">标的管理</h5>
                            <p class="card-text">
                                管理您的投资标的，包括标的代码、名称、类型等基本信息。
                            </p>
                            <a href="fund.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 投资组合 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-success">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-collection"></i>
                            </div>
                            <h5 class="card-title">投资组合</h5>
                            <p class="card-text">
                                创建和管理多个投资组合，跟踪每个组合的整体表现。
                            </p>
                            <a href="portfolio.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 交易记录 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-info">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-currency-exchange"></i>
                            </div>
                            <h5 class="card-title">交易记录</h5>
                            <p class="card-text">
                                记录基金买入/卖出交易，计算交易金额和盈亏情况。
                            </p>
                            <a href="transaction.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 投资目标 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-warning">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-bullseye"></i>
                            </div>
                            <h5 class="card-title">投资目标</h5>
                            <p class="card-text">
                                设置收益目标和价格提醒，跟踪目标达成状态。
                            </p>
                            <a href="investmentGoal.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 投资日记 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-danger">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-journal-text"></i>
                            </div>
                            <h5 class="card-title">投资日记</h5>
                            <p class="card-text">
                                记录投资决策过程和心得体会，总结投资经验。
                            </p>
                            <a href="investmentDiary.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 风险评估 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-secondary">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-shield-shaded"></i>
                            </div>
                            <h5 class="card-title">风险评估</h5>
                            <p class="card-text">
                                评估投资风险等级，分析波动率、最大回撤等指标。
                            </p>
                            <a href="riskAssessment.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>

                <!-- 税务计算 -->
                <div class="col-md-4 mb-4">
                    <div class="card feature-card card-purple">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-calculator"></i>
                            </div>
                            <h5 class="card-title">税务计算</h5>
                            <p class="card-text">
                                计算投资收益应缴税款，优化税务策略。
                            </p>
                            <a href="taxCalculation.html" class="btn btn-card quick-link">进入管理</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使用指南 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">使用指南</h2>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="accordion" id="usageGuide">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                                    如何开始使用本系统？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#usageGuide">
                                <div class="accordion-body">
                                    <ol>
                                        <li>首先在"标的管理"模块中添加您关注的投资标的</li>
                                        <li>在"投资组合"模块中创建您的投资组合，并添加标的</li>
                                        <li>在"交易记录"模块中记录您的买入/卖出操作</li>
                                        <li>使用其他模块来设置投资目标、记录投资日记等</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                                    如何管理投资组合？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#usageGuide">
                                <div class="accordion-body">
                                    <ol>
                                        <li>进入"投资组合"模块，点击"新增组合"按钮创建投资组合</li>
                                        <li>在组合详情页面点击"添加标的"按钮向组合中添加投资标的</li>
                                        <li>填写标的代码、持有份额、买入价格等信息</li>
                                        <li>系统会自动计算组合的总价值、总成本和总收益</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                                    如何跟踪投资目标？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#usageGuide">
                                <div class="accordion-body">
                                    <ol>
                                        <li>进入"投资目标"模块，点击"新增目标"按钮</li>
                                        <li>选择标的或投资组合，设置目标类型（收益目标或价格提醒）</li>
                                        <li>输入目标值和目标日期</li>
                                        <li>系统会定期检查目标达成情况并更新状态</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container text-center">
            <p>&copy; 2025 个人投资管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="index.js?v=1.0.0"></script>
</body>
</html>